import React, {Component} from "react";
import BrowserRouter from "react-router-dom/BrowserRouter";
import NavLink from "react-router-dom/NavLink";
import Route from "react-router/Route";
import Axios from "axios";
import Book from "./Book";

class BookList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            books: []
        };
    }

    render() {
        return (
            <div>
                <h2>书籍信息列表</h2>
                <BrowserRouter>
                    <div>
                        <ul>
                            {
                                this.state.books.map((book) => {
                                    return <li key={book.id}>
                                        <NavLink to={{pathname: "/bookList/book", state: {id: book.id}}}>
                                            {book.bookName}
                                        </NavLink>
                                    </li>;
                                })
                            }
                        </ul>
                        <Route path="/bookList/book" component={Book}></Route>
                    </div>
                </BrowserRouter>
            </div>
        );
    }

    // 组件完成挂载，发送ajax请求去后端项目获取数据
    componentDidMount() {
        Axios.get("http://localhost:8080/book/list").then((response) => {
            // console.log(response.data);
            this.setState({
                books:response.data
            });
        });
    }
}

export default BookList;